<script setup lang="ts">
  import { ref, watch } from 'vue'
  import {
    useUpdateOrderInfo,
    useGetOrderInfoBeforeEdit,
  } from '@/services/pages/order/useOrderDetail'
  import {
    useGetOrderModuleTypeOptions,
    useGetOrderModuleHandleMethod,
    useGetCustomFieldList,
  } from '@/services/pages/order/useModule'
  import useGetCustomerServiceOptions from '@/services/pages/common/specify-person-options'
  import { debounce, cloneDeep } from 'lodash'
  import { FormInstance, UploadFile, UploadRawFile } from 'element-plus'
  import { HMessageBox } from '@/components/common/message'
  import infoTip from '@/config/info-tip'
  import { CustomField } from './types'
  import VideoPreview from '@/components/pages/return-factory/index/create/custom-info/VideoPreview.vue'
  import PdfPreview from '@/components/pages/return-factory/index/create/custom-info/PdfPreview.vue'
  import pdfImg from '@/assets/image/pdf.png'
  import videoImg from '@/assets/image/pages/order/new/video.png'
  import moment from 'moment'
  import { orderAnnexUpload, orderVideoUpload } from '@/api/upload'
  import { useGetFaultTypes } from '@/services/pages/know/fault/useFaultType'
  import { useGetFaultByType } from '@/services/pages/know/useFault'
  import { UploadFilled } from '@element-plus/icons-vue'
  import { getFaultByType } from '@/api/knowledge'
  import { useGetSourceOptionList } from '@/services/pages/order/useSoruce'
  import SingleAddress from '@/components/business/address/single-address/SingleAddress.vue'

  const { form, loading: updateInfoLoading, save, resetForm } = useUpdateOrderInfo()
  const { info, loading: getInfoBeforeEdit, getForm } = useGetOrderInfoBeforeEdit()
  const {
    options: orderModuleTypeOptions,
    getOptionsParam: getOrderModuleTypeOptionsParam,
    getOptions: getOrderModuleTypeOptions,
  } = useGetOrderModuleTypeOptions()
  const {
    options: orderModuleHandleMethodOptions,
    getOptionsParam: getOrderModuleHandleMethodOptionsParam,
    getOptions: getOrderModuleHandleMethodOptions,
  } = useGetOrderModuleHandleMethod()
  const {
    specifyPersonOptions,
    getSpecifyPersonOptionsLoading,
    getSpecifyPersonOptionsKeyword,
    getSpecifyPersonOptions,
  } = useGetCustomerServiceOptions()
  const {
    getLoading: getCustomFieldListLoading,
    customFieldList,
    getCustomFields,
  } = useGetCustomFieldList()
  const { faultTypes, getFaultTypesLoading, getFaultTypes } = useGetFaultTypes()
  const {
    loading: getFaultByTypeLoading,
    faultList,
    getFaultParams,
    getFault,
  } = useGetFaultByType()
  const {
    optionList: sourceOptionList,
    getOptionListParam: getSourceOptionListParam,
    getOptionListLoading: getSourceOptionListLoading,
    getOptionList: getSourceOptionList,
  } = useGetSourceOptionList()

  const props = defineProps({
    orderId: {
      type: String,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'update'): void
  }>()

  // 表单组件实例
  const formInstance = ref<FormInstance | null>(null)

  // 自定义字段表单组件实例
  const customFieldFormInstance = ref<FormInstance | null>(null)

  // 抽屉显示状态
  const visible = defineModel('visible', { type: Boolean, default: false })

  // 工单分类
  const orderType = ref<Array<string> | null>([])

  // 工单处理方式
  const orderHandleMethod = ref<Array<string> | null>([])

  // 表单验证规则
  const rules = ref({
    userName: [{ required: true, message: '请输入客户名称', trigger: ['blur', 'change'] }],
    // address: [{ required: true, message: '请输入详细地址', trigger: ['blur', 'change'] }],
    workSourceId: [{ required: true, message: '请选择工单来源', trigger: ['change', 'blur'] }],
    // faultTypeRelationVos: [
    //   { required: true, message: '请选择处理类型', trigger: ['change', 'blur'] },
    // ],
    // faultRelationVos: [{ required: true, message: '请选择分类', trigger: ['change', 'blur'] }],
    // faultReason: [{ required: true, message: '详情为必填', trigger: ['change', 'blur'] }],
    // solution: [{ required: true, message: '解决措施为必填', trigger: ['change', 'blur'] }],
    suggestedRepair: [{ required: true, message: '请输入建议维修', trigger: ['blur', 'change'] }],
    actualRepair: [{ required: true, message: '请输入实际维修', trigger: ['blur', 'change'] }],
  })

  // 级联选择配置
  const cascaderProp = ref({
    value: 'id',
    label: 'name',
    children: 'selectVos',
    disabled: 'disabled',
    checkStrictly: true,
  })

  // 工单图片
  const orderPictureList = ref<Array<{ id: string; url: string; file: UploadRawFile }>>([])

  // 设备故障图
  const goodFaultImgFile = ref<{ id: string; url: string; file?: UploadRawFile | null }>({
    id: '',
    url: '',
    file: null,
  })

  // 设备序列号图
  const goodCodeImgFile = ref<{ id: string; url: string; file?: UploadRawFile | null }>({
    id: '',
    url: '',
    file: null,
  })

  // 自定义字段列表，用于修改
  const customFields = ref<Array<CustomField>>([])

  // 视频预览地址
  const videoPreviewList = ref<Array<string>>([])

  // 当前正在预览的视频的索引
  const currentPreviewVideoIndex = ref(0)

  // 视频预览弹窗显示状态
  const videoPreviewModalVisible = ref(false)

  // pdf预览地址
  const pdfPreviewList = ref<Array<string>>([])

  // 当前正在预览的pdf的索引
  const currentPreviewPdfIndex = ref(0)

  // pdf预览弹窗显示状态
  const pdfPreviewModalVisible = ref(false)

  // 文件上传加载
  const fileUploadLoading = ref(false)

  // 解决措施下拉选项
  const solveOptions = ref<Array<{ id: string; content: string }>>([])

  // 故障原因下拉选项
  const faultReasonOptions = ref<Array<{ id: string; content: string }>>([])

  /**
   * 隐藏抽屉
   */
  const hideDrawer = () => {
    visible.value = false
    resetForm()
  }

  /**
   * 获取工单模块分类下拉选项
   * @param {String} keyword - 关键字
   */
  const handleGetOrderModuleTypeOptions = (keyword = '') => {
    if (form.value.moduleId && getOrderModuleTypeOptionsParam.value.name !== keyword) {
      getOrderModuleTypeOptionsParam.value.name = keyword
      getOrderModuleTypeOptions(form.value.moduleId)
    }
  }

  /**
   * 获取工单模块处理方式下拉选项
   * @param {String} keyword - 关键字
   */
  const handleGetOrderModuleHandleMethodOptions = (keyword = '') => {
    if (form.value.moduleId && getOrderModuleHandleMethodOptionsParam.value.name !== keyword) {
      getOrderModuleHandleMethodOptionsParam.value.name = keyword
      getOrderModuleHandleMethodOptions(form.value.moduleId)
    }
  }

  /**
   * 获取客服人员下拉
   */
  const handleGetCustomerService = debounce((keyword: string) => {
    if (getSpecifyPersonOptionsKeyword.value !== keyword) {
      getSpecifyPersonOptionsKeyword.value = keyword
      getSpecifyPersonOptions()
    }
  }, 600)

  /**
   * 文件上传失败提示
   * 防抖是为了解决多次触发时，会弹出多个消息框，影响用户体验
   */
  const fileUploadFailInfoTip = debounce((msg: string) => {
    HMessageBox.error(msg)
  }, 100)

  /**
   * 工单图片上传事件
   * @param {UploadFile} file - 文件对象
   */
  const handleUploadOrderPicture = (file: UploadFile) => {
    if (!file.raw) {
      return false
    }

    if (!file.raw.type.includes('image')) {
      fileUploadFailInfoTip(infoTip.order.detail.upload_order_picture_type_err)
      return
    }

    if (orderPictureList.value.length >= 10) {
      fileUploadFailInfoTip(infoTip.order.detail.upload_order_picture_count_err)
      return
    }

    if (file.raw.size / 1024 / 1024 > 50) {
      fileUploadFailInfoTip(infoTip.order.detail.upload_order_picture_size_err)
      return
    }

    orderPictureList.value.push({
      id: '',
      url: URL.createObjectURL(file.raw),
      file: file.raw,
    })
  }

  /**
   * 删除工单图片事件
   * @param {Number} index - 图片索引
   */
  const handleDelOrderPicture = (index: number) => {
    const imgObj = orderPictureList.value.splice(index, 1)
    if (imgObj[0] && imgObj[0].id) {
      form.value.delImageIds.push(imgObj[0].id)
    }
  }

  /**
   * 设备故障图删除事件
   */
  const onDelGoodFaultImg = () => {
    const imgId = goodFaultImgFile.value.id
    if (imgId) {
      form.value.delImageIds.push(imgId)
    }

    goodFaultImgFile.value = {
      id: '',
      url: '',
      file: null,
    }
  }

  /**
   * 设备序列号图删除事件
   */
  const onDelGoodCodeImg = () => {
    const imgId = goodCodeImgFile.value.id
    if (imgId) {
      form.value.delImageIds.push(imgId)
    }

    goodCodeImgFile.value = {
      id: '',
      url: '',
      file: null,
    }
  }

  /**
   * 自定义字段删除文件事件
   * @param {Number} fieldIndex - 字段索引
   * @param {Number} fileIndex - 文件索引
   */
  const handleDelFile = (fieldIndex: number, fileIndex: number) => {
    const delField = customFields.value[fieldIndex].fileList.splice(fileIndex, 1)
    if (delField[0] && delField[0].id) {
      form.value.delImageIds.push(delField[0].id)
    }
  }

  /**
   * 附件预览事件
   * @param {Number} fieldIndex - 字段索引
   * @param {Number} annexIndex - 附件索引
   */
  const handlePreviewAnnex = (fieldIndex: number, annexIndex: number) => {
    pdfPreviewList.value = customFields.value[fieldIndex].fileList.map((item) => item.url)
    currentPreviewPdfIndex.value = annexIndex
    pdfPreviewModalVisible.value = true
  }

  /**
   * 视频预览事件
   * @param {Number} fieldIndex - 字段索引
   * @param {Number} videoIndex - 视频索引
   */
  const handlePreviewVideo = (fieldIndex: number, videoIndex: number) => {
    videoPreviewList.value = customFields.value[fieldIndex].fileList.map((item) => item.url)
    currentPreviewVideoIndex.value = videoIndex
    videoPreviewModalVisible.value = true
  }

  /**
   * 自定义字段文件上传校验
   * @param {Fn} callback - 校验对象的回调函数
   * @param {Number} fieldIndex - 字段索引
   */
  const customFieldFileValidate = (callback: (err?: Error) => void, fieldIndex: number) => {
    const field = customFields.value[fieldIndex]
    let tip = ''
    switch (field.type) {
      case 5:
        tip = field.tip || '请上传图片'
        break
      case 6:
        tip = field.tip || '请上传附件'
        break
      case 7:
        tip = field.tip || '请上传视频'
        break
    }
    if (field.required && field.fileList.length === 0) {
      callback(new Error(tip))
      return
    }
    callback()
  }

  /**
   * 自定义字段文件上传
   * @param {UploadFile} file - 文件对象
   * @param {Number} fieldIndex - 字段索引
   */
  const handleUploadCustomFieldFile = (file: UploadFile, fieldIndex: number) => {
    const field = customFields.value[fieldIndex]
    const fileType = field.type === 5 ? 'image' : field.type === 6 ? 'pdf' : 'video'

    if (!file.raw) {
      return false
    }

    if (!file.raw.type.includes(fileType)) {
      const tipOption = {
        image: infoTip.order.create.picture_upload_type_err,
        pdf: infoTip.order.create.pdf_upload_type_err,
        video: infoTip.order.create.video_upload_type_err,
      }
      fileUploadFailInfoTip(tipOption[fileType])
      return
    }

    if (file.raw.size / 1024 / 1024 > field.uploadSize) {
      const tipOption = {
        image: infoTip.order.create.picture_upload_size_err,
        pdf: infoTip.order.create.pdf_upload_size_err,
        video: infoTip.order.create.video_upload_size_err,
      }
      fileUploadFailInfoTip(tipOption[fileType].replace('$size', String(field.uploadSize)))
    }

    if (field.fileList.length >= field.uploadQty) {
      const tipOption = {
        image: infoTip.order.create.picture_upload_count_err,
        pdf: infoTip.order.create.pdf_upload_count_err,
        video: infoTip.order.create.video_upload_count_err,
      }
      fileUploadFailInfoTip(tipOption[fileType].replace('$num', String(field.uploadQty)))
      return
    }

    customFields.value[fieldIndex].fileList.push({
      id: '',
      url: URL.createObjectURL(file.raw),
      file: file.raw,
    })
  }

  /**
   * 评分更新事件
   * @param {Number} val - 更新后的值
   * @param {Number} fieldIndex - 字段索引
   */
  const handleChangeRate = (val: number, fieldIndex: number) => {
    customFields.value[fieldIndex].val = String(val * 2)
  }

  /**
   * 自定义字段日期更新事件
   * @param {Number} fieldIndex - 字段索引
   */
  const handleChangeDate = (fieldIndex: number) => {
    const newDate = moment(customFields.value[fieldIndex].val).format('YYYY-MM-DD')
    if (!customFields.value[fieldIndex].val) {
      customFields.value[fieldIndex].val = ''
      return
    }

    if (newDate) {
      customFields.value[fieldIndex].val = newDate
    }
  }

  /**
   * 自定义字段日期时间更新事件
   * @param {Number} fieldIndex - 字段索引
   */
  const handleChangeDateTime = (fieldIndex: number) => {
    const newDate = moment(customFields.value[fieldIndex].val).format('YYYY-MM-DD HH:mm')
    if (!customFields.value[fieldIndex].val) {
      customFields.value[fieldIndex].val = ''
      return
    }

    if (newDate) {
      customFields.value[fieldIndex].val = newDate
    }
  }

  /**
   * 分类选择事件
   * @param {Array<string>} val - 分类id集合
   */
  const handleFaultTypeSelect = (val: Array<string>) => {
    form.value.faultTypeRelationVos = val.map((item) => {
      return {
        oneFaultTypeId: item,
        twoFaultTypeId: '',
        threeFaultTypeId: '',
      }
    })

    getFaultParams.value = form.value.faultTypeRelationVos.map((item) => {
      return {
        oneFaultTypeId: item.oneFaultTypeId,
        twoFaultTypeId: 0,
        threeFaultTypeId: 0,
      }
    })
    getFault()
  }

  /**
   * 移除分类
   * @param {String} val - 分类id
   */
  const handleRemoveFaultType = async (val: string) => {
    getFaultParams.value = [
      {
        oneFaultTypeId: val,
        twoFaultTypeId: 0,
        threeFaultTypeId: 0,
      },
    ]
    const res = await getFaultByType(getFaultParams.value)
    res.data.data.rows.forEach((item) => {
      removeFaultReasonVoById(item)
    })
  }

  /**
   * 根据故障对象移除故障现象
   * @param {FaultByType} fault - 故障对象
   */
  const removeFaultReasonVoById = (fault: FaultByType) => {
    const faultIndex = form.value.faultRelationVos.findIndex((item) => item.faultId === fault.id)
    form.value.faultRelationVos.splice(faultIndex, 1)
    removeSolveByIds(fault.solution.map((item) => item.id))
    removeReasonByIds(fault.faultReason.map((item) => item.id))
  }

  /**
   * 根据id列表移除解决措施下拉选项和表单选中的解决措施
   * @param {Array<string>} ids - 解决措施id集合
   */
  const removeSolveByIds = (ids: Array<string>) => {
    solveOptions.value = solveOptions.value.filter((item) => !ids.includes(item.id))
    form.value.solution = form.value.solution.filter((item) => !ids.includes(item.id))
  }

  /**
   * 根据id列表移除故障原因下拉选项和表单选中的故障原因
   * @param {Array<string>} ids - 解决措施id集合
   */
  const removeReasonByIds = (ids: Array<string>) => {
    faultReasonOptions.value = faultReasonOptions.value.filter((item) => !ids.includes(item.id))
    form.value.faultReason = form.value.faultReason.filter((item) => !ids.includes(item.id))
  }

  /**
   * 故障现象选择事件
   * @param {Array<string>} value - 选择的值
   */
  const handleFaultPhenomenonChange = (value: Array<string>) => {
    form.value.faultRelationVos.length = 0
    value.forEach((id) => {
      faultPhenomenonOptionsAdd(id)
    })
  }

  /**
   * 故障现象移除事件
   * @param {String} id - 故障现象id
   */
  const handleFaultPhenomenonRemove = (id: string) => {
    const faultOption = faultList.value.find((item) => item.id === id)
    if (faultOption) {
      removeSolveByIds(faultOption.solution.map((item) => item.id))
      removeReasonByIds(faultOption.faultReason.map((item) => item.id))
    }
  }

  /**
   * 添加故障原因下拉选项
   */
  const faultReasonOptionsAdd = (options: Array<{ id: string; content: string }>) => {
    options.forEach((option) => {
      if (!faultReasonOptions.value.map((item) => item.id).includes(option.id) && option.content) {
        faultReasonOptions.value.push(option)
      }
    })
  }

  /**
   * 添加解决措施下拉选项
   */
  const solveOptionsAdd = (options: Array<{ id: string; content: string }>) => {
    options.forEach((option) => {
      if (!solveOptions.value.map((item) => item.id).includes(option.id) && option.content) {
        solveOptions.value.push(option)
      }
    })
  }

  /**
   * 根据故障id添加故障下拉选项并更新表单
   * @param {String} id - 要添加的id
   */
  const faultPhenomenonOptionsAdd = (id: string) => {
    const fault = faultList.value.find((fault) => fault.id === id)
    if (fault) {
      faultReasonOptionsAdd(fault.faultReason)
      solveOptionsAdd(fault.solution)
      const isCanAdd = !form.value.faultRelationVos
        .map((relation) => relation.faultId)
        .includes(fault.id)
      if (isCanAdd) {
        form.value.faultRelationVos.push({
          faultId: fault.id,
          fault: fault.name,
        })
      }
    } else {
      form.value.faultRelationVos.push({
        faultId: `${faultList.value.length}`,
        fault: id,
      })
      faultList.value.push({
        code: '',
        disabled: false,
        faultReason: [],
        id: `${faultList.value.length}`,
        name: id,
        select: true,
        solution: [],
      })
    }
  }

  /**
   * 故障原因选择事件
   * @param {Array<string>} ids - 选择的故障原因
   */
  const handleFaultReasonSelect = (ids: Array<string>) => {
    form.value.faultReason = cloneDeep(
      faultReasonOptions.value.filter((item) => ids.includes(item.id)),
    )
  }

  /**
   * 解决措施选择事件
   * @param {Array<string>} ids - 选择的解决措施
   */
  const handleSolveSelect = (ids: Array<string>) => {
    form.value.solution = cloneDeep(solveOptions.value.filter((item) => ids.includes(item.id)))
  }

  /**
   * 提交事件
   */
  const onSubmit = async () => {
    if (formInstance.value && customFieldFormInstance.value) {
      try {
        await formInstance.value.validate()
        await customFieldFormInstance.value.validate()
        if (orderType.value) {
          form.value.oneTypeId = orderType.value[0]
          form.value.twoTypeId = orderType.value[1] || '0'
          form.value.threeTypeId = orderType.value[2] || '0'
        }

        if (orderHandleMethod.value) {
          form.value.oneWayId = orderHandleMethod.value[0]
          form.value.twoWayId = orderHandleMethod.value[1] || '0'
          form.value.threeWayId = orderHandleMethod.value[2] || '0'
        }

        form.value.faultRelationVos = form.value.faultRelationVos.map((item) => {
          // 如果id的位数小于5位就说明这个选项是动态新增的，需要将id重置为0
          if (item.faultId.length <= 5) {
            return {
              faultId: '0',
              fault: item.fault,
            }
          }
          return item
        })

        fileUploadLoading.value = true
        form.value.imageVos = []
        const uploadOrderPicture = orderPictureList.value
          .filter((item) => !!item.file)
          .map((item) => item.file)
        if (uploadOrderPicture.length > 0) {
          const orderPictureUploadRes = await orderAnnexUpload(uploadOrderPicture)
          orderPictureUploadRes.data.data.rows.forEach((picture) => {
            form.value.imageVos.push({
              id: '',
              image: picture,
              type: 1,
            })
          })
        }
        orderPictureList.value
          .filter((item) => !item.file)
          .forEach((item) => {
            form.value.imageVos.push({
              id: item.id,
              image: item.url,
              type: 1,
            })
          })

        if (goodFaultImgFile.value.file) {
          const res = await orderAnnexUpload([goodFaultImgFile.value.file])
          if (res.data.code === 20000) {
            form.value.imageVos.push({
              id: '',
              image: res.data.data.rows[0],
              type: 3,
            })
          }
        } else {
          form.value.imageVos.push({
            id: goodFaultImgFile.value.id,
            image: goodFaultImgFile.value.url,
            type: 3,
          })
        }

        if (goodCodeImgFile.value.file) {
          const res = await orderAnnexUpload([goodCodeImgFile.value.file])
          if (res.data.code === 20000) {
            form.value.imageVos.push({
              id: '',
              image: res.data.data.rows[0],
              type: 4,
            })
          }
        } else {
          form.value.imageVos.push({
            id: goodCodeImgFile.value.id,
            image: goodCodeImgFile.value.url,
            type: 4,
          })
        }

        const customFieldFileList = customFields.value.filter((field) =>
          [5, 6].includes(field.type),
        )
        for (const field of customFieldFileList) {
          const fileList = field.fileList
            .filter((optionVo) => !!optionVo.file)
            .map((optionVo) => optionVo.file)
          if (fileList.length > 0) {
            const customFieldPictureListUploadRes = await orderAnnexUpload(fileList)
            customFields.value[field.fieldIndex].fileList = customFields.value[
              field.fieldIndex
            ].fileList.filter((item) => !item.file)
            customFieldPictureListUploadRes.data.data.rows.forEach((url) => {
              customFields.value[field.fieldIndex].fileList.push({
                id: '',
                url,
                file: null,
              })
            })
          }
        }

        const customFieldVideoList = customFields.value.filter((field) => field.type === 7)
        for (const field of customFieldVideoList) {
          const fileList = field.fileList
            .filter((optionVo) => !!optionVo.file)
            .map((optionVo) => optionVo.file)
          if (fileList.length > 0) {
            const customFieldPictureListUploadRes = await orderVideoUpload(fileList)
            customFields.value[field.fieldIndex].fileList = customFields.value[
              field.fieldIndex
            ].fileList.filter((item) => !item.file)
            customFieldPictureListUploadRes.data.data.rows.forEach((url) => {
              customFields.value[field.fieldIndex].fileList.push({
                id: '',
                url,
                file: null,
              })
            })
          }
        }

        fileUploadLoading.value = false

        form.value.workFieldValVos = []
        customFields.value.forEach((field) => {
          const optionVos: Array<{ id: string; optValue: string }> = []
          if (field.type === 4) {
            field.vals.forEach((val) => {
              const option = field.contents.find((content) => content.val === val)
              optionVos.push({
                id: option ? option.id : '',
                optValue: val,
              })
            })
          }
          if ([5, 6, 7].includes(field.type)) {
            field.fileList.forEach((file) => {
              optionVos.push({
                id: '',
                optValue: file.url,
              })
            })
          }
          if ([1, 2, 3, 8, 9, 10].includes(field.type)) {
            optionVos.push({
              id: '',
              optValue: field.val,
            })
          }
          form.value.workFieldValVos.push({
            id: field.id,
            moduleFieldId: field.moduleFieldId,
            workFieldId: field.workFieldId,
            name: field.name,
            type: field.type,
            optionVos,
          })
        })

        await save(props.orderId)
        hideDrawer()
        emits('update')
        goodFaultImgFile.value = {
          file: null,
          url: '',
          id: '',
        }

        goodCodeImgFile.value = {
          file: null,
          url: '',
          id: '',
        }
      } catch (error) {
        // error
      }
    }
  }

  /**
   * 获取来源下拉选项
   */
  const handleGetSourceOptionList = debounce(async (keyword: string) => {
    if (getSourceOptionListParam.value.name !== keyword) {
      getSourceOptionListParam.value.name = keyword
      await getSourceOptionList()
    }
  }, 600)

  /**
   * 故障现象点击事件
   * 主要用于反选时移除故障原因和解决措施
   * @param {string} id - 故障现象id
   */
  const handleFaultPhenomenonClick = (id: string) => {
    const idList = form.value.faultRelationVos.map((item) => item.faultId)
    if (!idList.includes(id)) {
      handleFaultPhenomenonRemove(id)
    }
  }

  /**
   * 设备故障图上传事件
   * @param {UploadFile} file - 文件对象
   */
  const handleUploadGoodFaultImg = (file: UploadFile) => {
    if (file.raw) {
      goodFaultImgFile.value = {
        file: file.raw,
        url: URL.createObjectURL(file.raw),
        id: '',
      }
    }
  }

  /**
   * 设备序列号图上传事件
   * @param {UploadFile} file - 文件对象
   */
  const handleUploadGoodCodeImg = (file: UploadFile) => {
    if (file.raw) {
      goodCodeImgFile.value = {
        file: file.raw,
        url: URL.createObjectURL(file.raw),
        id: '',
      }
    }
  }

  watch(
    visible,
    async (value) => {
      if (value && props.orderId) {
        await getFaultTypes()
        await getForm(props.orderId)
        await getSourceOptionList()
        form.value.content = info.value.content
        form.value.delImageIds = []
        form.value.empId = info.value.empId
        form.value.imageVos = info.value.imageVos.map((item) => {
          return {
            id: item.id,
            image: item.image,
            type: item.type ? item.type : 1,
          }
        })
        form.value.moduleId = info.value.moduleId
        form.value.oneTypeId = info.value.oneTypeId
        form.value.oneWayId = info.value.oneWayId
        form.value.threeTypeId = info.value.threeTypeId
        form.value.threeWayId = info.value.threeWayId
        form.value.twoTypeId = info.value.twoTypeId
        form.value.twoWayId = info.value.twoWayId
        form.value.workFieldValVos = info.value.workFieldValVos
        if (!form.value.workFieldValVos) {
          form.value.workFieldValVos = []
        }
        form.value.faultRelationVos = info.value.faultRelationVos
        form.value.faultReason = info.value.faultReason
        form.value.faultTypeRelationVos = info.value.faultTypeRelationVos
        form.value.solution = info.value.solution
        form.value.actualRepair = info.value.actualRepair
        form.value.suggestedRepair = info.value.suggestedRepair
        form.value.faultRelationVos = form.value.faultRelationVos.map((item) => {
          // 如果id的位数小于5位就说明这个选项是动态新增的，需要将id重置为和内容一样，否则回显时就会显示0
          if (item.faultId.length < 5) {
            return {
              fault: item.fault,
              faultId: item.fault,
            }
          }
          return item
        })
        form.value.workSourceId = info.value.workSourceId === '0' ? '' : info.value.workSourceId
        form.value.address = info.value.address || ''
        form.value.addressee = info.value.addressee || ''
        form.value.addresseePhone = info.value.addresseePhone || ''
        form.value.project = info.value.project || ''
        getFaultParams.value = form.value.faultTypeRelationVos
        await getFault()
        solveOptions.value.length = 0
        faultReasonOptions.value.length = 0
        form.value.faultRelationVos.forEach((item) => {
          const fault = faultList.value.find((faultOption) => faultOption.id === item.faultId)
          if (fault) {
            faultReasonOptionsAdd(fault.faultReason)
            solveOptionsAdd(fault.solution)
          }
        })
        orderPictureList.value = info.value.imageVos.map((picture) => {
          return {
            id: picture.id,
            url: picture.image,
            file: null,
          }
        })

        const goodFaultImg = (info.value.workImages || []).find((item) => item.type === 3)
        if (goodFaultImg) {
          goodFaultImgFile.value = {
            id: goodFaultImg.id,
            url: goodFaultImg.image,
            file: null,
          }
        }

        const goodCodeImg = (info.value.workImages || []).find((item) => item.type === 4)
        if (goodCodeImg) {
          goodCodeImgFile.value = {
            id: goodCodeImg.id,
            url: goodCodeImg.image,
            file: null,
          }
        }

        if (
          info.value.oneWayId &&
          info.value.oneWayId !== '0' &&
          !orderHandleMethod.value.includes(info.value.oneWayId)
        ) {
          orderHandleMethod.value.push(info.value.oneWayId)
        }

        if (
          info.value.twoWayId &&
          info.value.twoWayId !== '0' &&
          !orderHandleMethod.value.includes(info.value.twoWayId)
        ) {
          orderHandleMethod.value.push(info.value.twoWayId)
        }

        if (
          info.value.threeWayId &&
          info.value.threeWayId !== '0' &&
          !orderHandleMethod.value.includes(info.value.threeWayId)
        ) {
          orderHandleMethod.value.push(info.value.threeWayId)
        }

        if (
          info.value.oneTypeId &&
          info.value.oneTypeId !== '0' &&
          !orderType.value.includes(info.value.oneTypeId)
        ) {
          orderType.value.push(info.value.oneTypeId)
        }

        if (
          info.value.twoTypeId &&
          info.value.twoTypeId !== '0' &&
          !orderType.value.includes(info.value.twoTypeId)
        ) {
          orderType.value.push(info.value.twoTypeId)
        }

        if (
          info.value.threeTypeId &&
          info.value.threeTypeId !== '0' &&
          !orderType.value.includes(info.value.threeTypeId)
        ) {
          orderType.value.push(info.value.threeTypeId)
        }

        await getOrderModuleTypeOptions(form.value.moduleId)
        await getOrderModuleHandleMethodOptions(form.value.moduleId)
        await getCustomFields(form.value.moduleId)
        await getSpecifyPersonOptions()
        customFields.value.length = 0
        customFieldList.value.forEach((field) => {
          const dataField = form.value.workFieldValVos.find(
            (item) => item.moduleFieldId === field.moduleFieldId,
          )
          customFields.value.push({
            ...field,
            val: dataField && dataField.optionVos[0] ? dataField.optionVos[0].optValue : '',
            vals: dataField ? dataField.optionVos.map((item) => item.optValue) : [],
            fileList: dataField
              ? dataField.optionVos.map((item) => {
                  return {
                    file: null,
                    url: item.optValue,
                    id: item.id,
                  }
                })
              : [],
            fieldIndex: 0,
            id: dataField ? dataField.id : '',
          })
        })

        customFields.value = customFields.value.map((field, index) => {
          return {
            ...field,
            fieldIndex: index,
          }
        })
      }
    },
    { immediate: true },
  )
</script>

<template>
  <h-drawer
    v-model="visible"
    title="修改工单信息"
    :loading="
      updateInfoLoading || getInfoBeforeEdit || getCustomFieldListLoading || fileUploadLoading
    "
    :width="800"
    unit="px"
    @close="hideDrawer"
  >
    <el-form
      ref="formInstance"
      class="modal_form_content"
      label-position="top"
      :model="form"
      :rules="rules"
      inline-message
      scroll-to-error
    >
      <!-- 工单来源 -->
      <el-form-item label="工单来源" prop="source">
        <el-select
          v-model="form.workSourceId"
          placeholder="请选择"
          filterable
          :loading="getSourceOptionListLoading"
          :filter-method="handleGetSourceOptionList"
        >
          <el-option
            v-for="(item, index) in sourceOptionList"
            :key="index"
            :label="item.name"
            :value="item.id"
            :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>

      <!-- 工单客服 -->
      <!-- <el-form-item label="工单客服">
        <el-select
          v-model="form.empId"
          :loading="getSpecifyPersonOptionsLoading"
          :filter-method="handleGetCustomerService"
          clearable
          filterable
          placeholder="请选择"
          remote-show-suffix
        >
          <el-option value="0" label="按规则分配">
            <div style="display: flex; justify-content: space-between; align-items: center">
              <span>按规则分配</span> <span style="color: #fb9337">系统</span>
            </div>
          </el-option>
          <el-option
            v-for="item in specifyPersonOptions"
            :key="item.name"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item> -->

      <!-- 工单分类 -->
      <!-- <el-form-item label="工单分类">
        <el-cascader
          v-model="orderType"
          :props="cascaderProp"
          :filter-method="handleGetOrderModuleTypeOptions"
          :debounce="600"
          :options="orderModuleTypeOptions"
          clearable
          filterable
          placeholder="请选择工单分类"
        />
      </el-form-item> -->

      <!-- 处理方式 -->
      <!-- <el-form-item label="处理方式">
        <el-cascader
          v-model="orderHandleMethod"
          :filter-method="handleGetOrderModuleHandleMethodOptions"
          :options="orderModuleHandleMethodOptions"
          :props="cascaderProp"
          clearable
          filterable
          placeholder="请选择处理方式"
        />
      </el-form-item> -->

      <!-- 工单描述 -->
      <el-form-item label="工单描述" prop="content">
        <el-input
          v-model.trim="form.content"
          placeholder="请输入工单描述"
          show-word-limit
          type="textarea"
          resize="both"
          maxlength="200"
        />
      </el-form-item>

      <!-- 处理类型 -->
      <el-form-item label="处理类型" prop="faultTypeRelationVos">
        <el-select
          :model-value="form.faultTypeRelationVos.map((item) => item.oneFaultTypeId)"
          :loading="getFaultTypesLoading"
          placeholder="请选择处理类型"
          multiple
          collapse-tags
          collapse-tags-tooltip
          :max-collapse-tags="1000"
          @change="handleFaultTypeSelect"
          @remove-tag="handleRemoveFaultType"
        >
          <el-option
            v-for="(faultType, faultTypeIndex) in faultTypes"
            :key="faultTypeIndex"
            :value="faultType.id"
            :label="faultType.name"
          />
        </el-select>
      </el-form-item>

      <!-- 分类 -->
      <el-form-item label="分类" prop="faultRelationVos">
        <el-select
          :model-value="form.faultRelationVos.map((item) => item.faultId)"
          :loading="getFaultByTypeLoading"
          placeholder="请选择分类"
          multiple
          collapse-tags
          collapse-tags-tooltip
          :max-collapse-tags="1000"
          allow-create
          filterable
          :no-data-text="
            form.faultTypeRelationVos.map((item) => item.oneFaultTypeId).length === 0
              ? '请选择处理类型'
              : '无数据'
          "
          @change="handleFaultPhenomenonChange"
          @remove-tag="handleFaultPhenomenonRemove"
        >
          <el-option
            v-for="(fault, faultIndex) in faultList"
            :key="faultIndex"
            :value="fault.id"
            :label="fault.name"
            :disabled="fault.disabled"
            @click="handleFaultPhenomenonClick(fault.id)"
          >
            <div class="fault-phenomenon-option">
              {{ fault.name }}
              <template v-if="fault.code"> - {{ fault.code }} </template>
              <!-- <div>
                <h-tooltip-text :text="fault.name" :max-width="120" :height="36"></h-tooltip-text>
              </div>
              <div style="margin-right: 20px">
                <h-tooltip-text :text="fault.code" :max-width="120" :height="36" text-align="right">
                </h-tooltip-text>
              </div> -->
            </div>
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 收件人 -->
      <el-form-item label="收件人" prop="addressee">
        <el-input v-model.trim="form.addressee" placeholder="请输入收件人" />
      </el-form-item>

      <!-- 收件人联系方式 -->
      <el-form-item label="收件人联系方式" prop="addresseePhone">
        <el-input
          v-model.trim.number="form.addresseePhone"
          placeholder="请输入收件人联系方式"
          maxlength="11"
        />
      </el-form-item>

      <!-- 收件人地址 -->
      <el-form-item label="收件人地址" prop="address">
        <el-input v-model.trim="form.address" placeholder="请输入收件人地址" />
      </el-form-item>

      <!-- 项目名称 -->
      <el-form-item label="项目名称" prop="project">
        <el-input v-model.trim="form.project" placeholder="请输入项目名称" />
      </el-form-item>

      <!--详情-->
      <el-form-item label="详情" prop="faultReason">
        <el-select
          v-if="faultReasonOptions.length"
          :model-value="form.faultReason.map((item) => item.id)"
          placeholder="请选择详情"
          allow-create
          multiple
          collapse-tags
          collapse-tags-tooltip
          :max-collapse-tags="1000"
          filterable
          default-first-option
          :reserve-keyword="false"
          @change="handleFaultReasonSelect"
        >
          <el-option
            v-for="(reason, reasonIndex) in faultReasonOptions"
            :key="reasonIndex"
            :label="reason.content"
            :value="reason.id"
          >
            <h-tooltip-text :text="reason.content" :max-width="150" :height="32" />
          </el-option>
        </el-select>
        <el-input
          v-else
          v-model.trim="form.faultReason"
          placeholder="请输入详情"
          show-word-limit
          type="textarea"
          resize="both"
          class="desc-28-height"
        />
      </el-form-item>

      <!--解决措施/维修方案-->
      <el-form-item label="解决措施/维修方案" prop="solution">
        <el-select
          v-if="solveOptions.length"
          :model-value="form.solution.map((item) => item.id)"
          placeholder="请选择解决措施/维修方案"
          multiple
          collapse-tags
          collapse-tags-tooltip
          :max-collapse-tags="1000"
          filterable
          default-first-option
          :reserve-keyword="false"
          @change="handleSolveSelect"
        >
          <el-option
            v-for="(solve, solveIndex) in solveOptions"
            :key="solveIndex"
            :label="solve.content"
            :value="solve.id"
          >
            <h-tooltip-text :text="solve.content" :max-width="300" :height="32" />
          </el-option>
        </el-select>
        <el-input
          v-else
          v-model.trim="form.solution"
          placeholder="请输入解决措施/维修方案"
          show-word-limit
          type="textarea"
          resize="both"
          class="desc-28-height"
        />
      </el-form-item>

      <!-- 建议维修 -->
      <!-- <el-form-item label="建议维修" prop="suggestedRepair">
        <el-input
          v-model.trim="form.suggestedRepair"
          placeholder="请输入建议维修"
          show-word-limit
          type="textarea"
          resize="both"
          maxlength="200"
        />
      </el-form-item> -->

      <!-- 实际维修 -->
      <!-- <el-form-item label="实际维修" prop="actualRepair">
        <el-input
          v-model.trim="form.actualRepair"
          placeholder="请输入实际维修"
          show-word-limit
          type="textarea"
          resize="both"
          maxlength="200"
        />
      </el-form-item> -->

      <!-- 工单图片 -->
      <el-form-item label="工单图片(最多10张)" prop="imageVos" class="file-upload-wrapper">
        <div class="file-list">
          <el-upload
            v-if="orderPictureList.length !== 10"
            :auto-upload="false"
            :on-change="handleUploadOrderPicture"
            :show-file-list="false"
            accept="image/*"
            action="#"
            drag
            multiple
            class="upload"
          >
            <el-icon :size="24" color="#007cff">
              <UploadFilled />
            </el-icon>
          </el-upload>
          <h-image
            v-for="(picture, index) in orderPictureList"
            :key="index"
            :src="picture.url"
            :padding="2"
            :width="80"
            :height="50"
            :preview-src-list="orderPictureList.map((item) => item.url)"
            :initial-index="index"
            @del="handleDelOrderPicture(index)"
          />
        </div>
      </el-form-item>

      <el-form-item label="设备故障图" class="file-upload-wrapper">
        <el-upload
          v-if="!goodFaultImgFile.url"
          :auto-upload="false"
          :show-file-list="false"
          accept="image/*"
          action="#"
          drag
          :limit="1"
          class="upload"
          :on-change="handleUploadGoodFaultImg"
        >
          <el-icon :size="24" color="#007cff">
            <UploadFilled />
          </el-icon>
        </el-upload>
        <h-image
          v-else
          :src="goodFaultImgFile.url"
          :padding="2"
          :width="80"
          :height="50"
          @del="onDelGoodFaultImg"
        />
      </el-form-item>

      <el-form-item label="序列号图" class="file-upload-wrapper">
        <el-upload
          v-if="!goodCodeImgFile.url"
          :auto-upload="false"
          :show-file-list="false"
          accept="image/*"
          action="#"
          drag
          :limit="1"
          class="upload"
          :on-change="handleUploadGoodCodeImg"
        >
          <el-icon :size="24" color="#007cff">
            <UploadFilled />
          </el-icon>
        </el-upload>
        <h-image
          v-else
          :src="goodCodeImgFile.url"
          :padding="2"
          :width="80"
          :height="50"
          @del="onDelGoodCodeImg"
        />
      </el-form-item>
    </el-form>

    <!-- 自定义字段 -->
    <el-form
      ref="customFieldFormInstance"
      label-position="top"
      inline-message
      class="modal_form_content custom-field-form"
      :model="customFields"
      :scroll-to-error="true"
      :scroll-into-view-options="true"
    >
      <template v-for="(field, index) in customFields" :key="index">
        <!-- 单行文本 -->
        <el-form-item
          v-if="field.type === 1"
          :label="field.name"
          :rules="[
            {
              required: field.required,
              message: field.tip || '请输入内容',
              trigger: ['change', 'blur'],
            },
          ]"
          :prop="[index.toString(), 'val']"
        >
          <el-input
            v-model.trim="customFields[index].val"
            :placeholder="field.tip || '请输入'"
            maxlength="100"
          />
        </el-form-item>

        <!-- 多行文本 -->
        <el-form-item
          v-if="field.type === 2"
          :label="field.name"
          :rules="[
            {
              required: field.required,
              message: field.tip || '请输入内容',
              trigger: ['change', 'blur'],
            },
          ]"
          :prop="[index.toString(), 'val']"
        >
          <el-input
            v-model.trim="customFields[index].val"
            :placeholder="field.tip || '请输入'"
            type="textarea"
            maxlength="200"
            show-word-limit
            resize="both"
          />
        </el-form-item>

        <!-- 单选 -->
        <el-form-item
          v-if="field.type === 3"
          :label="field.name"
          :rules="[
            {
              required: field.required,
              message: field.tip || '请选择',
              trigger: ['change', 'blur'],
            },
          ]"
          :prop="[index.toString(), 'val']"
        >
          <el-select v-model="customFields[index].val" :placeholder="field.tip || '请选择'">
            <el-option
              v-for="(option, singleSelectOptionIndex) in field.contents"
              :key="singleSelectOptionIndex"
              :label="option.val"
              :value="option.val"
            />
          </el-select>
        </el-form-item>

        <!-- 多选 -->
        <el-form-item
          v-if="field.type === 4"
          :label="field.name"
          :rules="[
            {
              required: field.required,
              message: field.tip || '请选择',
              trigger: ['change', 'blur'],
            },
          ]"
          :prop="[index.toString(), 'vals']"
        >
          <el-select
            v-model="customFields[index].vals"
            :placeholder="field.tip || '请选择'"
            multiple
            collapse-tags
            collapse-tags-tooltip
            :max-collapse-tags="3"
          >
            <el-option
              v-for="(option, optionIndex) in field.contents"
              :key="optionIndex"
              :label="option.val"
              :value="option.val"
            />
          </el-select>
        </el-form-item>

        <!-- 评分 -->
        <el-form-item
          v-if="field.type === 8"
          :label="field.name"
          :rules="[
            {
              required: field.required,
              message: field.tip || '请选择',
              trigger: ['change', 'blur'],
            },
          ]"
          :prop="[index.toString(), 'val']"
        >
          <el-rate
            allow-half
            :model-value="Number(customFields[index].val) / 2"
            @change="(val: number) => handleChangeRate(val, index)"
          />
        </el-form-item>

        <!-- 日期 -->
        <el-form-item
          v-if="field.type === 9"
          :label="field.name"
          :rules="[
            {
              required: field.required,
              message: field.tip || '请选择日期',
              trigger: ['change', 'blur'],
            },
          ]"
          :prop="[index.toString(), 'val']"
        >
          <el-date-picker
            v-model="customFields[index].val"
            :placeholder="field.tip || '请选择日期'"
            @change="handleChangeDate(index)"
          />
        </el-form-item>

        <!-- 日期时间 -->
        <el-form-item
          v-if="field.type === 10"
          :label="field.name"
          :rules="[
            {
              required: field.required,
              message: field.tip || '请选择日期时间',
              trigger: ['change', 'blur'],
            },
          ]"
          :prop="[index.toString(), 'val']"
        >
          <el-date-picker
            v-model="customFields[index].val"
            type="datetime"
            format="YYYY-MM-DD HH:mm"
            date-format="YYYY-MMM-DD"
            time-format="HH:mm"
            :placeholder="field.tip || '请选择日期时间'"
            @change="handleChangeDateTime(index)"
          />
        </el-form-item>

        <!-- 图片上传 -->
        <el-form-item
          v-if="field.type === 5"
          :label="field.name"
          class="file-upload-wrapper"
          :rules="[
            {
              validator: (rule, value, callback) => customFieldFileValidate(callback, index),
              trigger: ['change', 'blur'],
            },
          ]"
          :prop="[index.toString(), 'fileList']"
        >
          <el-upload
            :auto-upload="false"
            :on-change="(file: UploadFile) => handleUploadCustomFieldFile(file, index)"
            :show-file-list="false"
            accept="image/*"
            action="#"
            multiple
            drag
            class="upload"
          >
            <el-icon size="24" color="#007cff">
              <UploadFilled />
            </el-icon>
          </el-upload>

          <div class="file-list">
            <h-image
              v-for="(picture, pictureIndex) in field.fileList"
              :key="pictureIndex"
              :src="picture.url"
              :padding="2"
              :width="80"
              :height="50"
              :initial-index="index"
              :preview-src-list="field.fileList.map((item) => item.url)"
              @del="handleDelFile(index, pictureIndex)"
            />
          </div>
        </el-form-item>

        <!-- 附件上传 -->
        <el-form-item
          v-if="field.type === 6"
          :label="field.name"
          class="file-upload-wrapper"
          :rules="[
            {
              validator: (rule, value, callback) => customFieldFileValidate(callback, index),
              trigger: ['change', 'blur'],
            },
          ]"
          :prop="[index.toString(), 'fileList']"
        >
          <el-upload
            :auto-upload="false"
            :show-file-list="false"
            accept=".pdf"
            action="#"
            multiple
            drag
            class="upload"
            :on-change="(file: UploadFile) => handleUploadCustomFieldFile(file, index)"
          >
            <el-icon size="24" color="#007cff">
              <UploadFilled />
            </el-icon>
          </el-upload>

          <div class="file-list">
            <h-image
              v-for="(pdf, pdfIndex) in field.fileList"
              :key="pdfIndex"
              :src="pdfImg"
              :padding="2"
              :width="80"
              :height="50"
              :is-show-img-preview="false"
              @del="handleDelFile(index, pdfIndex)"
              @preview="handlePreviewAnnex(index, pdfIndex)"
            />
          </div>
        </el-form-item>

        <!-- 视频上传 -->
        <el-form-item
          v-if="field.type === 7"
          :label="field.name"
          class="file-upload-wrapper"
          :rules="[
            {
              validator: (rule, value, callback) => customFieldFileValidate(callback, index),
              trigger: ['change', 'blur'],
            },
          ]"
          :prop="[index.toString(), 'fileList']"
        >
          <el-upload
            :auto-upload="false"
            :on-change="(file: UploadFile) => handleUploadCustomFieldFile(file, index)"
            :show-file-list="false"
            accept="video/*"
            action="#"
            multiple
            drag
            class="upload"
          >
            <el-icon size="24" color="#007cff">
              <UploadFilled />
            </el-icon>
          </el-upload>

          <div class="file-list">
            <h-image
              v-for="(video, videoIndex) in field.fileList"
              :key="videoIndex"
              :src="videoImg"
              :padding="2"
              :width="80"
              :height="50"
              :is-show-img-preview="false"
              @del="handleDelFile(index, videoIndex)"
              @preview="handlePreviewVideo(index, videoIndex)"
            />
          </div>
        </el-form-item>
      </template>
    </el-form>
    <template #footer>
      <h-button is-modal type="primary" @click="onSubmit">保存</h-button>
      <h-button is-modal @click="hideDrawer">关闭</h-button>
    </template>

    <video-preview
      v-model:visible="videoPreviewModalVisible"
      :initial-index="currentPreviewVideoIndex"
      :video-list="videoPreviewList"
    />

    <pdf-preview
      v-model:visible="pdfPreviewModalVisible"
      :initial-index="currentPreviewPdfIndex"
      :pdf-list="pdfPreviewList"
    />
  </h-drawer>
</template>

<style scoped lang="scss">
  :deep(.el-select .el-select__wrapper) {
    height: auto !important;
  }

  .fault-phenomenon-option {
    display: flex;
    column-gap: 5px;
  }

  .file-upload-wrapper {
    .upload {
      width: 80px;
      height: 50px;

      :deep(.el-upload) {
        width: 100%;
        height: 100%;

        .el-upload-dragger {
          display: flex;
          align-items: center;
          column-gap: 5px;
          width: 100%;
          height: 100%;
          padding: 0;
          background: none;
          justify-content: center;
        }
      }
    }

    .file-list {
      display: grid;
      margin-top: 5px;
      grid-template-columns: repeat(6, 80px);
      width: 100%;
      justify-content: space-between;
      row-gap: 5px;
    }
  }

  :deep(.el-textarea) {
    .el-textarea__inner {
      width: 100% !important;
      min-height: 75px !important;
      max-height: 150px !important;
    }
  }

  :deep(.el-date-editor) {
    height: 28px !important;
    width: 100%;

    .el-input__wrapper {
      height: 26px !important;
    }
  }

  .custom-field-form {
    margin-top: 12px;
  }
</style>
